<template>
	<view class="c-loading" :style="{
		width: `${size}rpx`,
		height: `${size}rpx`,
		color: color
		}">
		<text v-for="i in 12" :key="i" class="c-loading__text"></text>
	</view>
</template>

<script>
	export default {
		name: 'c-loading',
		props: {
			size: {
				type: [ String, Number ],
				default: 40
			},
			color: {
				type: String,
				default: '#fff'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-loading{
		position: relative;
		display: inline-block;
		width: 40rpx;
		max-width: 100%;
		height: 40rpx;
		max-height: 100%;
		animation: c-spin 0.8s linear infinite;
		&__text{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			@for $i from 1 to 12 {
				&:nth-of-type(#{$i}){
					transform: rotate(30deg * $i);
					opacity: 1.0625 - 0.0625 * $i;
				}
			}
			&::before{
				display: block;
				width: 2px;
				height: 25%;
				margin: 0 auto;
				background-color: currentColor;
				border-radius: 40%;
				content: ' ';
			}
		}
	}
</style>
